<template>
  <div class="new-info-box p-t-24">
    <moduleHeader
      title="你可能感兴趣"
      rightStr="更多"
      :rightUrl="parseFullPath(`/${this.$route.fullPath.split('/')[1]}/all/`)"
    ></moduleHeader>

    <div class="m-t-24 p-l-20 p-r-20">
      <a
        :href="parseFullPath(`${item.path}_detail/${item.id}.html`)"
        v-for="(item, index) in list"
        :key="item.id"
        :class="[
          'flex-wrap flex-justify-between t-d-n',
          index !== 0 ? 'm-t-16' : '',
          index !== list.length - 1 ? 'b-b-1 p-b-17' : 'p-b-25'
        ]"
      >
        <span class="new-info-left flex-1 d-b">
          <span class="new-info-card-title ell-2">
            {{ item.title }}
          </span>
          <span class="new-info-card-time d-b">{{ item.news_time }}</span>
        </span>
        <img
          :alt="item.title"
          v-if="item.headimg"
          class="new-info-card-header"
          :src="parseResourceUrl(item.headimg)"
        />
      </a>
    </div>
  </div>
</template>

<script>
import moduleHeader from '@/components/moduleHeader/index.vue'
export default {
  components: {
    moduleHeader
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style scoped>
.new-info-box {
  background: #ffffff;
  border-radius: 12px;
}

.new-info-card-title {
  /* width: 163px; */
  height: 40px;
  font-size: 14px;
  color: #383838;
  line-height: 20px;
  word-wrap: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.new-info-card-time {
  width: 128px;
  height: 17px;
  font-size: 12px;
  color: #999;
  line-height: 17px;
  margin-top: 4px;
  white-space: nowrap;
}

.new-info-card-header {
  display: block;
  width: 93px;
  height: 61px;
  border-radius: 8px;
  object-fit: cover;
  margin-left: 11px;
}
.new-info-left {
  /* width: 128px; */
  display: inline-block;
}
.b-b-1 {
  border-bottom: 1px solid #f2f2f2;
}
</style>
